<mat-sidenav-container class="full-height">
  <mat-sidenav #sidenav mode="over">
    <mat-toolbar>
      <mat-toolbar-row>
        <h2>Cobbler</h2>
      </mat-toolbar-row>
    </mat-toolbar>

    <mat-nav-list>
      <h2 matSubheader>Configuration</h2>
      <a
        mat-list-item
        class="nav-link"
        aria-current="page"
        [routerLink]="['/distros']"
        [routerLinkActive]="'is-active'"
      >
        <b class="symbol">&#187;</b>
        Distros
      </a>
      <a
        mat-list-item
        class="nav-link"
        aria-current="page"
        [routerLink]="['/profiles']"
        [routerLinkActive]="'is-active'"
      >
        <b class="symbol">&#187;</b>
        Profiles
      </a>
      <a
        mat-list-item
        class="nav-link"
        aria-current="page"
        [routerLink]="['/systems']"
        [routerLinkActive]="'is-active'"
      >
        <b class="symbol">&#187;</b>
        Systems
      </a>
      <a
        mat-list-item
        class="nav-link"
        aria-current="page"
        [routerLink]="['/repos']"
        [routerLinkActive]="'is-active'"
      >
        <b class="symbol">&#187;</b>
        Repos
      </a>
      <a
        mat-list-item
        class="nav-link"
        aria-current="page"
        [routerLink]="['/images']"
        [routerLinkActive]="'is-active'"
      >
        <b class="symbol">&#187;</b>
        Images
      </a>
      <a
        mat-list-item
        class="nav-link"
        aria-current="page"
        [routerLink]="['/templates']"
        [routerLinkActive]="'is-active'"
      >
        <b class="symbol">&#187;</b>
        Templates
      </a>
      <a
        mat-list-item
        class="nav-link"
        aria-current="page"
        [routerLink]="['/snippets']"
        [routerLinkActive]="'is-active'"
      >
        <b class="symbol">&#187;</b>
        Snippets
      </a>
      <a
        mat-list-item
        class="nav-link"
        aria-current="page"
        [routerLink]="['/management-classes']"
        [routerLinkActive]="'is-active'"
      >
        <b class="symbol">&#187;</b>
        Management Classes
      </a>
      <a
        mat-list-item
        class="nav-link"
        aria-current="page"
        [routerLink]="['/settings']"
        [routerLinkActive]="'is-active'"
      >
        <b class="symbol">&#187;</b>
        Settings
      </a>
      <mat-divider></mat-divider>
      <h2 matSubheader>Resources</h2>
      <a
        mat-list-item
        class="nav-link"
        [routerLink]="['/packages']"
        [routerLinkActive]="'is-active'"
      >
        <b class="symbol">&#8620;</b>
        Packages
      </a>
      <a
        mat-list-item
        class="nav-link"
        [routerLink]="['/app-files']"
        [routerLinkActive]="'is-active'"
      >
        <b class="symbol">&#8620;</b>
        Files</a
      >
      <mat-divider></mat-divider>
      <h2 matSubheader>Actions</h2>
      <a mat-list-item class="nav-link" [routerLink]="['/import']"
        ><b class="symbol">&#9881;</b>Import DVD</a
      >
      <a mat-list-item class="nav-link" [routerLink]="['/sync']"
        ><b class="symbol">&#9881;</b>Sync</a
      >
      <a mat-list-item class="nav-link" [routerLink]="['/reposync']"
        ><b class="symbol">&#9881;</b>Reposync</a
      >
      <a mat-list-item class="nav-link" [routerLink]="['/buildiso']"
        ><b class="symbol">&#9881;</b>Build ISO</a
      >
      <mat-divider></mat-divider>
      <h2 matSubheader>Cobbler</h2>
      <a mat-list-item class="nav-link" [routerLink]="['/check']">
        <b class="symbol">&#8646;</b>
        Check</a
      >
      <a mat-list-item class="nav-link" [routerLink]="['/events']">
        <b class="symbol">&#8646;</b>
        Events</a
      >
      <a
        mat-list-item
        class="nav-link"
        href="https://cobbler.readthedocs.io/en/latest/"
        target="_blank"
      >
        <b class="symbol">&#8646;</b>
        Documentation</a
      >
      <a
        mat-list-item
        class="nav-link"
        href="https://gitter.im/cobbler/community"
        target="_blank"
      >
        <b class="symbol">&#8646;</b>
        Online Help Chat</a
      >
      <mat-divider></mat-divider>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <cobbler-navbar
      *ngIf="router.url !== '/login'"
      (toggleSidenav)="sidenav.toggle()"
    ></cobbler-navbar>

    <div class="content">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>
